<template>
  <div class="app-container details">
    <div class="detailsDiv">
      <div class="dialogDom">
        <div><span>监控内容类型:</span> 评论</div>
        <div><span>监控类型:</span>xxxxxxX</div>
        <div><span>监控等级:</span>xxxxxxX</div>
        <div><span>纳入监控时间: </span>xxxxxX</div>
      </div>
      <div class="dialogDom">
        <div><span>原文创作者:</span>FSG</div>
        <div><span>原文创作者ID:</span>414444</div>
        <div><span>是否实名认证:</span>是</div>
        <div><span>创作者IP:</span>192.168.1.1</div>
      </div>
      <div class="dialogDom">
        <div><span>评论发布人:</span>FS.B</div>
        <div><span>评论发布人ID:</span>xxxxxxX</div>
        <div><span>评论发布人IP:</span>192.168.1.1</div>
      </div>
    </div>
    <div class="detailsDiv">
      <div>
        <div class="dialogDiv"><span>原文标题:</span>xxxxxxxX</div>
        <div class="dialogDiv">
          <span>原文内容链接:</span>
          <a href="http://">xxxxxxxxxxxxxxxxxxXXXX</a>
        </div>
        <div class="dialogDiv">
          <span>评论内容:</span>
          <div class="dialogDivCon">
            xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            XxxxXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          </div>
        </div>
      </div>
    </div>
    <div class="detailsDiv">
      <div class="dialogDom">
        <div><span>内容观看总数:</span>877</div>
        <div><span>内容收藏数:</span>87</div>
        <div><span>内容点赞数:</span>55</div>
        <div><span>分享转发数:</span>192.168.1.1</div>
      </div>
      <div class="dialogDom">
        <div><span>评论观看总数:</span>87777</div>
        <div><span>评论收藏数:</span>87</div>
        <div><span>评论点赞数:</span>577</div>
        <div><span>分享转发数:</span>544</div>
        <div><span>举报数:</span>999</div>
      </div>
    </div>
  </div>
</template>

<script>
import { list } from "@/api/monitor/online";

export default {
  name: "Online",
  data() {
    return {
      outerVisible: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        ipaddr: undefined,
        userName: undefined,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true;
      list(this.queryParams).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 强退按钮操作 */
    dialogShow(row) {
      this.$router.push("/publicOpinion/processedContent");
    },
  },
};
</script>
<style lang="scss" scoped>
.details {
  font-size: 14px;
  color: #666;
}
.detailsDiv {
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 2%;
  padding: 10px 20px;
}
.dialogDom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  margin: 15px 0;
  color: #999;
  span {
    color: #333;
    margin-right: 10px;
  }
  > div {
    width: 20%;
  }
}
.dialogDiv {
  margin: 15px 0;
  color: #999;
  .dialogDivCon{
    margin-top: 10px;
  }
  span {
    color: #333;
    margin-right: 10px;
  }
}
</style>
